<template>
  <div class="changeword">
    <p class="title">{{ $t('assemble.修改密码') }}</p>
    <p class="heng"></p>
    <div class="change-conten">
      <div class="content-box">
        <p class="lable">{{ $t('assemble.原密码') }}</p> <el-input v-model="oldpassword" :placeholder="$t('assemble.请输入')" style="width: 584px;"
          show-password></el-input>
      </div>
      <div class="content-box">
        <p class="lable">{{ $t('assemble.确认密码') }}</p> <el-input v-model="okpassword" :placeholder="$t('assemble.请输入')" style="width: 584px;" show-password
          @blur="passwordandok"></el-input>
      </div>
      <div class="content-box">
        <p class="lable">{{ $t('assemble.新密码') }}</p> <el-input v-model="newpassword" :placeholder="$t('assemble.请输入')" style="width: 584px;"
          show-password></el-input>
      </div>
    </div>
    <div class="btn" @click="resetpasswword">{{ $t('assemble.确定') }}</div>
  </div>
</template>
<script>
import { resetpwd } from "../../../utils/api"
export default {
  data() {
    return {
      oldpassword: '',//老密码
      okpassword: '',//确认密码
      newpassword: '',//新密码
    }
  },
  methods: {
    //确认密码
    passwordandok() {
      if (this.oldpassword != this.okpassword) {
        this.$message({
          message:this.$t('assemble.请确认密码和原密码一致'),
          type: 'warning'
        });
      }
    },
    async resetpasswword() {
      let data = {
        password: this.oldpassword,
        newpassword: this.newpassword
      }
      let res = await resetpwd(data)
      if (res.code == 1) {
        console.log("res",res)
        this.$message({
          message:this.$t('assemble.密码修改成功请重新登录'),
          type: 'success'
        });
        localStorage.removeItem("token")
        localStorage.removeItem("userinfo")
        this.$router.push({ path: '/login', })
        this.oldpassword = ""
        this.okpassword = ""
        this.newpassword = ""
      }else{
        console.log("wwwwwwwww")
        this.$message({
          message: res.msg,
          type: 'warning'
        });
      }
      if(res.code ==401){
        this.$router.push({ path: '/login' })
      }
      
    }
  }

}
</script>
<style scoped lang="scss">
.changeword {
  width: 850px;
  // height: 796px;
  background: #FFFFFF;
  box-shadow: 5px 0px 15px 0px rgba(224, 0, 0, 0.05);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  margin-top: 20px;
  margin-top: 100px;
  padding: 10px;
  box-sizing: border-box;

  .title {
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 17px;
    display: flex;
  }

  .heng {
    width: 820px;
    height: 1px;
    opacity: 1;
    background-color: #EDEDED;
    margin: 20px auto;
  }

  .content-box {
    display: flex;
    text-align: right;
    align-items: center;

    .lable {
      width: 100px;
      margin-right: 10px;
      font-size: 14px;
    }


  }

  .btn {
    width: 350px;
    height: 45px;
    border-radius: 22px 22px 22px 22px;
    opacity: 1;
    border: 1px solid #E00000;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #E00000;
    line-height: 41px;
    text-align: center;
    margin: 50px 168px;
    cursor: pointer;
  }
}
</style>